﻿@page "/components/textfield"


<DocsPage>
    <DocsPageHeader Title="Text Field" SubTitle="Text field components are used for receiving user provided information."/>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Text Field's">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldBasicExample" ShowCode="false">
                <TextFieldBasicExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Form Props">
                <Description></Description>
            </SectionHeader>
            <SectionSubGroups>
                
                <DocsPageSection>
                    <SectionHeader Title="Dense">
                        <Description>With the <CodeInline>margin</CodeInline> prop you can reduce the text field height.</Description>
                    </SectionHeader>
                    <SectionContent Code="TextFieldDenseExample" ShowCode="false">
                        <TextFieldDenseExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Helper Text">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent Code="TextFieldFormPropsHelperTextExample" ShowCode="false">
                        <TextFieldFormPropsHelperTextExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Disabled">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent Code="TextFieldFormPropsDisabledExample" ShowCode="false">
                        <TextFieldFormPropsDisabledExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Read Only">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent Code="TextFieldFormPropsReadOnlyExample" ShowCode="false">
                        <TextFieldFormPropsReadOnlyExample/>
                    </SectionContent>
                </DocsPageSection>

            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Helper Text On Focus">
                <Description>With the <CodeInline>HelperTextOnFocus</CodeInline> property set to true, the helper text will only display on focus.</Description>
            </SectionHeader>
            <SectionContent Code="TextFieldHelperTextExample" ShowCode="false">
                <TextFieldHelperTextExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Counter">
                <Description>
                    If you set the <CodeInline>Counter</CodeInline> prop to any int, the counter will be display at the bottom of the textfield.<br />
                    Using a specific number will show the desired max while setting it to <CodeInline>0</CodeInline> will only show the current count.<br />
                    Add <CodeInline>MaxLength</CodeInline> to force a max count directly on the input and use <CodeInline>Validation</CodeInline> to validate the data.
                </Description>
            </SectionHeader>
            <SectionContent Code="TextFieldCharacterCountExample" ShowCode="false">
                <TextFieldCharacterCountExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Adornments">
                <Description>This can be used to add a prefix or a suffix. Text, Icon or Icon Button.</Description>
            </SectionHeader>
            <SectionContent Code="TextFieldAdornmentsExample" ShowCode="false" Block="true" FullWidth="true">
                <TextFieldAdornmentsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Adornment Color">
                <Description>The color of the adornment can be changed separately from the textfield.</Description>
            </SectionHeader>
            <SectionContent Code="TextFieldAdornmentColorExample" ShowCode="false">
                <TextFieldAdornmentColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Binding Properties of a POCO">
                <Description>
                    The following text fields are bound against the properties of a POCO (Plain old C-Sharp Object). Edit them to see the model change. Reset the model and see the textfields change.
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: always use two-way bindings (<CodeInline>@("@bind-Value")</CodeInline>) with textfields.</MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="TextFieldBindingExample" ShowCode="false">
                <TextFieldBindingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Binding Value Types vs Nullables">
                <Description>
                    When you bind value types, the text field will not be empty even if the user hasn't entered a value yet because a value type always has a value, even when unassigned.
                    The two-way-bindable <CodeInline>Value</CodeInline> property will automatically assume the default value of that type  (i.e. <CodeInline>0</CodeInline> for <CodeInline>int</CodeInline>).<br />
                    So if you want your text fields to be empty as long as nothing has been entered yet, use the nullable version of that type (i.e. <CodeInline>int?</CodeInline>).
                </Description>
            </SectionHeader>
            <SectionContent Code="TextFieldBindingValueTypesExample" ShowCode="false">
                <TextFieldBindingValueTypesExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Immediate vs Debounced">
                <Description>
                    By default, <CodeInline>MudTextField</CodeInline> updates the bound value on Enter or when it loses focus. Set <CodeInline>Immediate="true"</CodeInline> to update the value whenever the user types.<br />
                    You can also set the <CodeInline>DebounceInterval</CodeInline> parameter to the number of milliseconds you want to wait before updating the bound value. If you need to know when the interval elapses, you can pass an <CodeInline>OnDebounceIntervalElapsed</CodeInline> EventCallback.
                    Notice how in this example the debounced text only updates 500 ms after you stop typing.
                </Description>
            </SectionHeader>
            <SectionContent Code="DebouncedTextFieldExample" ShowCode="false">
                <DebouncedTextFieldExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Clear button">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldClearableAndInputTypeExample" ShowCode="false">
                <TextFieldClearableAndInputTypeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiline">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldMultilineExample" ShowCode="false">
                <TextFieldMultilineExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Focus">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldFocusExample" ShowCode="false" Block="true" FullWidth="true">
                <TextFieldFocusExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Select">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldSelectExample" ShowCode="false" Block="true" FullWidth="true">
                <TextFieldSelectExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Select Range">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldSelectRangeExample" ShowCode="false" Block="true" FullWidth="true">
                <TextFieldSelectRangeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Input Types">
                <Description>
                    You can change the InputType of MudTextField to use the native browser implementation of the 
                    <MudLink Href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">HTML input element</MudLink>. 
                    Note that any Placeholder will be ignored where the browser provides a default placeholder.       
                    <br />
                    <br />
                    All inputs can be bound to <CodeInline>string</CodeInline> types; alternatively, input types <CodeInline>Date</CodeInline> and <CodeInline>DateTimeLocal</CodeInline>
                    can be bound to a nullable <CodeInline>DateTime?</CodeInline>. When binding to a <CodeInline>DateTime?</CodeInline> you <strong>must</strong> set the <CodeInline>Format</CodeInline> property to <CodeInline>yyyy-MM-dd</CodeInline> for input type <CodeInline>Date</CodeInline>, and you 
                    <strong>must</strong> set the <CodeInline>Format</CodeInline> property to <CodeInline>s</CodeInline> (<MudLink Href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings#Sortable">ISO 8601</MudLink>) for input type <CodeInline>DateTimeLocal</CodeInline>.

                </Description>
            </SectionHeader>
            <SectionContent Code="TextFieldNativeInputsExample">
                <TextFieldNativeInputsExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Inputs">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TextFieldInputsExample" ShowCode="false">
                <TextFieldInputsExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
